<template>
  <div class="content flex justify-around flex-items-center">
    <div class="item provice flex" @click="openPicker('provice')">
      <span>{{
        selectedProviceValue ? selectedProviceValue.areaName : "全部省份"
      }}</span>
      <van-icon name="arrow-down" />
    </div>
    <!-- <div class="item city flex" @click="openPicker('city')">
      <span>{{ selectedCityValue  ? selectedCityValue.areaName : '全部城市'}}</span>
      <van-icon name="arrow-down" />
    </div> -->
    <div class="item market flex" @click="openPicker('market')">
      <span>{{
        selectedMarketValue ? selectedMarketValue.text : "全部市场"
      }}</span>
      <van-icon name="arrow-down" />
    </div>

    <van-action-sheet v-model="showPicker">
      <div
        class="loading_box w-full flex justify-center flex-items-center"
        v-if="proviceColumns.length == 0"
      >
        <van-loading color="#0094ff" />
      </div>
      <van-picker
        v-if="proviceColumns.length != 0"
        :title="popupTitle"
        show-toolbar
        :columns="proviceColumns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-action-sheet>
    <!-- <van-action-sheet v-model="showCity" title="选择城市">
      <van-picker
      title="选择城市"
      show-toolbar
      :columns="cityColumns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
    </van-action-sheet>
    <van-action-sheet v-model="showMarket" title="选择市场">
      <van-picker
      title="选择市场"
      show-toolbar
      :columns="marketColumns"
      @confirm="onConfirm"
      @cancel="onCancel"
      @change="onChange"
    />
    </van-action-sheet> -->
  </div>
</template>

<script>
import { getAreaList, getMarketList } from "@/api/api";
import { Toast } from "vant";

export default {
  data() {
    return {
      list: {},
      showPicker: false,
      proviceColumns: [],
      // 选中的值
      selectedProviceValue: null,
      selectedCityValue: null,
      selectedMarketValue: null,
      // 当前打开的是哪个picker
      currentPicker: "provice",
    };
  },
  computed: {
    popupTitle() {
      return this.currentPicker == "provice" ? "选择省份" : "选择市场";
    },
  },
  async created() {
    await this.getAreaList("0");
    // m默认选中辽宁省
    this.selectedProviceValue = {
      areaCode: "210000",
      areaName: "辽宁省",
      text: "辽宁省",
    };
  },
  mounted() {
    this.$emit("confirm", {
      proviceCode: "210000",
      marketCode: "",
    });
  },
  methods: {
    //行政区划
    async getAreaList(parentCode) {
      let params = {
        pageNum: "1",
        pageSize: "10000",
        parentCode,
      };
      let { data } = await getAreaList(params);
      if (data.code == 200) {
        if (this.currentPicker == "provice") {
          data.rows.unshift({
            areaCode: "",
            areaName: "全部省份",
          });
        }
        data.rows.forEach((item) => {
          item.text = item.areaName;
        });

        this.proviceColumns = [
          {
            values: data.rows,
            defaultIndex: 0,
          },
        ];
      }
    },
    onCancel() {
      this.showPicker = false;
    },
    onConfirm(e) {
      this.showPicker = false;

      if (this.currentPicker == "provice") {
        this.selectedProviceValue = e[0];
        this.selectedMarketValue = {
          text: "全部市场",
          marketname: "全部市场",
          marketcode: "",
        };
      }
      if (this.currentPicker == "city") {
        this.selectedCityValue = e[0];
      }
      if (this.currentPicker == "market") {
        this.selectedMarketValue = e[0];
      }
      

      this.$emit("confirm", {
        proviceCode:
          this.selectedProviceValue && this.selectedProviceValue.areaCode
            ? this.selectedProviceValue.areaCode
            : "",
        marketCode:
          this.selectedMarketValue && this.selectedMarketValue.marketcode
            ? this.selectedMarketValue.marketcode
            : "",
      });
    },
    onChange() {},
    async openPicker(pickerName) {
      this.currentPicker = pickerName;

      if (this.currentPicker == "provice") {
        await this.getAreaList(0);
        this.showPicker = true;
      }
      if (this.currentPicker == "city") {
        await this.getAreaList(this.selectedProviceValue.areaCode);

        !this.selectedProviceValue
          ? Toast("请先选择省份")
          : (this.showPicker = true);
      }
      if (this.currentPicker == "market") {
        !this.selectedProviceValue
          ? Toast("请先选择省份")
          : (this.showPicker = true);
        await this.getMarketList(this.selectedProviceValue.areaCode);
      }
    },
    // 获取市场列表
    async getMarketList(provincecode) {
      this.proviceColumns = [];
      let params = {
        pageNum: "1",
        pageSize: "10000",
        provincecode,
      };
      let { data } = await getMarketList(params);
      if (data.code == 200) {
        if (this.currentPicker == "market") {
          data.rows.unshift({
            marketcode: "",
            marketname: "全部市场",
          });
        }
        data.rows.forEach((item) => {
          item.text = item.marketname;
        });
        // m默认选中第一项
        this.selectedMarketValue = data.rows[0];
        this.proviceColumns = [
          {
            values: data.rows,
            defaultIndex: 0,
          },
        ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .item {
    font-size: 30px;
  }

  .loading_box {
    height: 500px;
  }

  .market {
    span {
      // 显示最大长度五个字
      display: inline-block;
      max-width: 330px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
